<template>
    <div class="home">
        <Header></Header>
        <section>
            <LeftBar></LeftBar>
            <div class="content" :style="{width:'calc(100vw - '+(isCollapseSideBar?65:200)+'px)'}">
                <Bread></Bread>
                <router-view></router-view>
            </div>
        </section>
    </div>
</template>

<script>
/* eslint-disable */ // 忽略该行往下 eslint的错误
    // 在单独构建的版本中辅助函数为 Vuex.mapState
    import {
        mapState,
        mapGetters,
        mapMutations,
        mapActions
    } from "vuex";
    import Header from "../components/Header";
    import LeftBar from "../components/LeftBar";
    import Bread from "../components/Bread";

    export default {
        components: {
            Header,
            LeftBar,
            Bread
        },
        data() {
            return {

            };
        },
        computed: {
            ...mapState(["global_bg_color", "isCollapseSideBar"])
        }
    };

</script>

<style scoped>
    .home {
        display: flex;
        flex-direction: column;
        height: 100vh;
    }

    section {
        display: flex;
        flex: 1;
    }

    .content {
        padding: 10px;
    }

</style>
